<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
    <view class="startVote">
        <view class="title">开始投票</view>
        <view class="text2">{{ msg.title }}</view>
        <image class="bg" src="../../static/images/bg.png"></image>
        <view class="content-box">
            <view class="txt1">
                1.主任选举：候选人{{ zrList.length }}人,可选{{ msg.directorNum }}人
            </view>
            <view class="list-box">
                <view v-if="msg.directorNum > 1">
                    <van-checkbox-group v-model="details" @change="setChange">
                        <van-checkbox v-for="(item, i) in zrList" :key="i" :name="item.id" shape="square">
                            <view class="list">
                                <view class="txt2">{{ item.candidateName || "-" }}</view>
                                <view class="txt3">{{ item.sex }}</view>
                                <view class="txt4">{{ item.age || 0 }}岁</view>
                                <view class="txt5" @click.stop="lookMsg($event, item.candidateId)">查看个人简介</view>
                            </view>
                        </van-checkbox>
                    </van-checkbox-group>
                </view>
                <view v-else>
                    <van-radio-group v-model="details" @change="setChange">
                        <van-radio v-for="(item, i) in zrList" :key="i" :name="item.id">
                            <view class="list">
                                <view class="txt2">{{ item.candidateName || "-" }}</view>
                                <view class="txt3">{{ item.sex }}</view>
                                <view class="txt4">{{ item.age || 0 }}岁</view>
                                <view class="txt5" @click.stop="lookMsg($event, item.candidateId)">查看个人简介</view>
                            </view>
                        </van-radio>
                    </van-radio-group>
                </view>
            </view>
            <view class="txt1">
                2.副主任选举：{{ fzrList.length }}人,可选{{ msg.deputyDirectorNum }}人
            </view>
            <view class="list-box">
                <view v-if="msg.deputyDirectorNum > 1">
                    <van-checkbox-group v-model="details2" @change="setChange2">
                        <van-checkbox v-for="(item, i) in fzrList" :key="i" :name="item.id" shape="square">
                            <view class="list">
                                <view class="txt2">{{ item.candidateName || "-" }}</view>
                                <view class="txt3">{{ item.sex }}</view>
                                <view class="txt4">{{ item.age || 0 }}岁</view>
                                <view class="txt5" @click.stop="lookMsg($event, item.candidateId)">查看个人简介</view>
                            </view>
                        </van-checkbox>
                    </van-checkbox-group>
                </view>
                <view v-else>
                    <van-radio-group v-model="details2" @change="setChange2">
                        <van-radio v-for="(item, i) in fzrList" :key="i" :name="item.id">
                            <view class="list">
                                <view class="txt2">{{ item.candidateName || "-" }}</view>
                                <view class="txt3">{{ item.sex }}</view>
                                <view class="txt4">{{ item.age || 0 }}岁</view>
                                <view class="txt5" @click.stop="lookMsg($event, item.candidateId)">查看个人简介</view>
                            </view>
                        </van-radio>
                    </van-radio-group>
                </view>
            </view>
            <view class="txt1">
                3.委员选举：候选人{{ wyList.length }}人,可选{{ msg.memberNum }}人
            </view>
            <view class="list-box">
                <view v-if="msg.memberNum > 1">
                    <van-checkbox-group v-model="details3" @change="setChange3">
                        <van-checkbox v-for="(item, i) in wyList" :key="i" :name="item.id" shape="square">
                            <view class="list">
                                <view class="txt2">{{ item.candidateName || "-" }}</view>
                                <view class="txt3">{{ item.sex }}</view>
                                <view class="txt4">{{ item.age || 0 }}岁</view>
                                <view class="txt5" @click.stop="lookMsg($event, item.candidateId)">查看个人简介</view>
                            </view>
                        </van-checkbox>
                    </van-checkbox-group>
                </view>
                <view v-else>
                    <van-radio-group v-model="details3" @change="setChange3">
                        <van-radio v-for="(item, i) in wyList" :key="i" :name="item.id">
                            <view class="list">
                                <view class="txt2">{{ item.candidateName || "-" }}</view>
                                <view class="txt3">{{ item.sex }}</view>
                                <view class="txt4">{{ item.age || 0 }}岁</view>
                                <view class="txt5" @click.stop="lookMsg($event, item.candidateId)">查看个人简介</view>
                            </view>
                        </van-radio>
                    </van-radio-group>
                </view>
            </view>
        </view>
        <image class="button" src="../../static/images/anniu.png" @click="sendVote"></image>
    </view>
</template>
<script>
import radioGroup from '@/wxcomponents/vant/dist/radio-group'
import radio from '@/wxcomponents/vant/dist/radio'
import checkbox from '@/wxcomponents/vant/dist/checkbox'
import checkboxGroup from '@/wxcomponents/vant/dist/checkbox-group'

import { mapState } from 'vuex'
export default {
    components: {
        radioGroup,
        radio,
        checkbox,
        checkboxGroup
    },
    computed: {
		...mapState(['fontSize'])
	},
    data() {
        return {
            details: [],
            details2: [],
            details3: [],
            form: {
                id: "",
                details: []
            },
            checked: 1,
            msg: {},
            zrList: [],
            fzrList: [],
            wyList: [],
            occupancyType: {
                1: "户主",
                2: "家人",
                3: "亲友",
                4: "租客",
                5: "物业",
                6: "其他"
            }
        }
    },
    onLoad(options) {
        this.form.id = options.id;
        this.getList(options.id)
    },
    methods: {
        // 个人简介
        lookMsg(e, candidateId) {
            e.preventDefault();
            uni.navigateTo({
                url: '/vote/index/peopleMsg?id=' + candidateId
            })
        },
        // 提交
        sendVote() {
            let idS = [];
            if (typeof (this.details) == 'number') {
                idS.push(this.details)
            } else {
                idS = [...idS, ...this.details]
            }
            if (typeof (this.details2) == 'number') {
                idS.push(this.details2)
            } else {
                idS = [...idS, ...this.details2]
            }
            if (typeof (this.details3) == 'number') {
                idS.push(this.details3)
            } else {
                idS = [...idS, ...this.details3]
            }
            let arrs = [...this.zrList, ...this.fzrList, ...this.wyList];
            let userInfo = uni.getStorageSync('userInfo')
            let details = idS.map(e => {
                let msg = (arrs.filter((e2) => {
                    return e2.id == e
                }))[0]
                return {
                    candidateId: msg.candidateId,
                    candidateName: msg.candidateName,
                    candidateType: msg.candidateType,
                    voteId: Number(this.form.id),
                    voteCandidateId: Number(e),
                    personId: userInfo.id,
                    personName: userInfo.name,
                    personMobile: userInfo.mobile,
                    personIdentity: this.occupancyType[userInfo.occupancyType],
                    personAddress: (() => {
                        let txt = "";
                        userInfo.rooms.forEach(item => {
                            txt += `${item.partition}区 ${item.buildingNo}-${item.unitNo}-${item.roomNo},`
                        })
                        txt = txt.substr(0, txt.length - 1);
                        return txt
                    })()
                }
            })
            this.$http2.post('vx/ywh/vote/personVote', {
                id: Number(this.form.id),
                details
            }).then(res => {
                if (res.code === 10000) {
                    uni.showModal({
                        title: "提交成功",
                        showCancel: false,
                        success: () => {
                            uni.navigateBack()
                        }
                    })
                }
            })
        },
        // 候选人列表
        getList(id) {
            this.$http2.post('vx/ywh/vote/info', { id: Number(id) }).then(res => {
                if (res.code === 10000) {
                    this.msg = res.data;
                    this.msg.candidates.forEach(e => {
                        if (e.candidateType == 1) {
                            this.zrList.push(e)
                        } else if (e.candidateType == 2) {
                            this.fzrList.push(e)
                        } else if (e.candidateType == 3) {
                            this.wyList.push(e)
                        }
                    })
                }
            })
        },
        setChange(e) {
            this.details = e.detail;
        },
        setChange2(e) {
            this.details2 = e.detail;
        },
        setChange3(e) {
            this.details3 = e.detail;
        },
    }
}
</script>
<style lang="scss" scoped>
.startVote {
    padding: 0 30rpx;

    .bg {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .title {
        color: #fff;
        font-size: 40rpx;
        padding-top: 110rpx;
        text-align: center;
    }

    .text2 {
        color: #fff;
        font-size: 66rpx;
        text-align: center;
        padding: 0 20rpx;
        position: absolute;
        top: 180rpx;
        font-weight: bold;
        text-shadow: 0rpx 5rpx 20rpx #f03658;
    }

    .content-box {
        height: 980rpx;
        background: #F8ECE2;
        box-shadow: 0rpx 5rpx 20rpx 0rpx #DB657A;
        overflow: auto;
        border-radius: 20rpx;
        margin-top: 260rpx;
        padding: 0 40rpx;

        .txt1 {
            font-size: 32rpx;
            color: #333333;
            padding: 20rpx 10rpx;
        }

        .list-box {
            background: #fff;
            border-radius: 8rpx;
            overflow: hidden;

            .list {
                color: #333;
                font-size: 28rpx;
                height: 77rpx;
                display: flex;
                align-items: center;
                .txt2 {
                    width: 100rpx;
                }
                .txt3 {
                    width: 60rpx;
                }
                .txt4 {
                    flex: 1;
                }
                .txt5 {
                    color: #FFB924;
                    font-size: 24rpx;
                }
            }

        }
    }

    /deep/.van-checkbox__label {
        width: 100%;

    }
    /deep/.van-radio__label {
        width: 100%;
    }

    /deep/.van-checkbox {
        padding: 0 30rpx;
        border-bottom: 1rpx solid #E5E5E5;
    }

    /deep/.van-radio {
        padding: 0 30rpx;
        border-bottom: 1rpx solid #E5E5E5;
    }

    .button {
        width: 576rpx;
        height: 160rpx;
        position: absolute;
        bottom: 44rpx;
        left: 50%;
        margin-left: -288rpx;
        z-index: 1;
    }
}
</style>